<template>
	<view>
		<view class="header" :style="'padding-top: '+bartop+'px; padding-bottom:10rpx;background: rgba(0, 0, 0, 0);'">
			<view class="goodsmsgheader headertop" style="width: 100%;">
				<navigator open-type="navigateBack" style="padding:10rpx">
					<image src="https://x.bilinmeiju.com/static/myfangchan/zjt.png" mode="aspectFit"></image>
				</navigator>
				<text style="font-size: 36rpx;
		font-family: Source Han Sans CN;
		font-weight: 600;
		color: #ffffff;
		">每日签到</text>
				<!-- <image src="/static/goodsmsghei.png" mode="aspectFit" bindtap="showmsg" wx:if="{{cartlen=='00'?false:true}}"><text>{{cartlen}}</text></image> -->
			</view>
		</view>


		<view class="top">
			<image class="top" src="../../../static/qdtbj.png" mode="aspectFill"></image>
			<view class="top1">
				<view class="top1-1">
					<view class="top1-1text">当前签到邻里豆</view>
					<view class="top1-1text1">{{info.money}}</view>
				</view>
				<image src="../../../static/qdtbs.png" mode=""></image>
			</view>
		</view>

		<view class="box">
			<view class="box1">
				<view class="box1-1">
					<view class="box1-1text">连续签到{{info.day}}天有豪礼</view>
					<view class="box1-1text1">{{info.status}}</view>
				</view>
				<view class="box1-2">

					<view class="box1-2-1" v-for="(item,index) in info.weeklist" :key="index">
						<view
							:class="item.type=='gray'?'box1-2-1box':item.type=='success'?'box1-2-1box1':'box1-2-1box2'">
							{{item.type=='gray'?item.day:''}}
							<image v-if="item.type=='success'" style="width: 37rpx;height: 30rpx;"
								src="../../../static/qdcg.png" mode="">
								<image v-if="item.type=='gift'" style="width: 36rpx;height: 42rpx;"
									src="../../../static/qdtitlelw.png" mode="">
						</view>
						<view class="box1-2-1text">{{item.title}}</view>
					</view>


					<!-- <view class="box1-2-1">
						<view class="box1-2-1box">
							补
						</view>
						<view class="box1-2-1text">周二</view>
					</view>
					<view class="box1-2-1">
						<view class="box1-2-1box" style="background-image: url('../../../static/qdtitle2.png');">
							10
						</view>
						<view class="box1-2-1text">周三
						</view>
					</view>
					<view class="box1-2-1">
						<view class="box1-2-1box" style="background-image: url('../../../static/qdtitle2.png');">
							10
						</view>
						<view class="box1-2-1text">周四
						</view>
					</view>
					<view class="box1-2-1">
						<view class="box1-2-1box" style="background-image: url('../../../static/qdtitle2.png');">
							10
						</view>
						<view class="box1-2-1text">周五
						</view>
					</view>
					<view class="box1-2-1">
						<view class="box1-2-1box" style="background-image: url('../../../static/qdtitle2.png');">
							10
						</view>
						<view class="box1-2-1text">周六</view>
					</view>
					<view class="box1-2-1">
						<view class="box1-2-1box" style="background-image: url('../../../static/qdtitle3.png');">
							<image style="width: 36rpx;height: 42rpx;" src="../../../static/qdtitlelw.png" mode="">
							</image>
						</view>
						<view class="box1-2-1text">周日</view>
					</view> -->
				</view>
				<view class="riqi">
					<view class="riqitop">
						签到日历 {{info.month}}
					</view>
					<view class="xian"></view>
					<view class="riqits">

						<view class="riqitsbox" v-for="(item,index) in info.list" :key="index">
							<view :class="item.selected?'riqits2':'riqits1'"
								:style="{'color':!item.selected?item.color=='red'?'#F15909':'':''}">{{item.day}}</view>
						</view>


					</view>

				</view>
				<view class="qdbottom">
					<view class="qdbottom1">
						日常任务
					</view>
					<view class="qdbottom2" v-for="(item,index) in info.renwu" :key="index">
						<view class="qdbottom2z">
							<image src="../../../static/qdtx1.png" mode=""></image>
							<view class="qdbottom2z-1">
								<view class="qdbottom2z-1text">{{item.title}}</view>
								<view class="qdbottom2z-1text1">{{item.jifen}}</view>
							</view>
						</view>
						<view class="qdbottom2y" @click="getupqiandao">
							立即签到
						</view>
					</view>


				</view>
				<view class="bottom">
					<view class="">签到规则 ></view>
				</view>


			</view>
		</view>
		<uni-popup ref="popup">
			<view class="tance">
				<image class="tancebj" src="../../../static/qdtcbj.png" mode=""></image>
				<view class="qdcgtitle">
					每日签到奖励
				</view>
				<view class="qdcgtitle1">
					连续签到{{info.lian}}天
				</view>
				<view class="qiandaoriqi">
					<view class="lilidou" v-for="(item,index) in info.weeklist" :key="index">
						<image class="linlidimg" src="/static/qdlld.png" mode=""></image>
						<view class="linlidtext">
							第{{index+1}}天
						</view>
					</view>
				</view>
				<view class="button" @click="guanbi">
					确定
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	//签到首页
	export default {
		data() {
			return {
				bartop: 0,
				titles: 0,
				info: {},

			}
		},
		onLoad(e) {
			this.bartop = this.$bartop;
		},
		onShow() {
			this.getinitqiandao()
		},
		methods: {
			getinitqiandao() {
				this.$post('center/initqiandao', {}).then(res => {
					this.info = res.data
				})
			},
			guanbi() {
				this.$refs.popup.close()
			},
			getupqiandao() {
				this.$refs.popup.open('center')
				this.$post('center/upqiandao', {}).then(res => {
					this.getinitqiandao()
				})
			},

		}
	}
</script>

<style lang="scss">
	.top {
		width: 100vw;
		height: 431rpx;
	}

	.top1 {
		display: flex;
		width: 90vw;
		margin: 0 auto;
		margin-top: -300rpx;
		justify-content: space-between;
		align-items: center;

		.top1-1 {
			.top1-1text {
				margin-bottom: 20rpx;
				font-size: 24rpx;
				font-family: Alibaba PuHuiTi;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 30rpx;
			}

			.top1-1text1 {
				font-size: 60rpx;
				font-family: YouSheBiaoTiHei;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 60rpx;
			}
		}

		>image {
			width: 332rpx;
			height: 310rpx;
		}
	}

	.box {
		position: absolute;
		top: 400rpx;
	}

	.box1 {
		width: 720rpx;
		margin: 0 15rpx;
		height: 280rpx;
		background-image: url('/static/qdtit.png');
		background-size: 720rpx;
	}

	.box1-1 {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 40rpx;

		.box1-1text {
			font-size: 24rpx;
			font-family: Alibaba PuHuiTi;
			font-weight: 400;
			color: #333333;
			line-height: 30rpx;
		}

		.box1-1text1 {
			font-size: 26rpx;
			font-family: Alibaba PuHuiTi;
			font-weight: 500;
			color: #999999;
			line-height: 30rpx;
		}
	}

	.box1-2 {
		padding: 20rpx 40rpx;
		display: flex;
		justify-content: space-between;

		.box1-2-1 {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.box1-2-1box {
				width: 77rpx;
				height: 77rpx;
				background-image: url('../../../static/qdtitle2.png');
				background-size: 77rpx;
				font-size: 26rpx;
				text-align: center;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 77rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.box1-2-1box1 {
				width: 77rpx;
				height: 77rpx;
				background-image: url('../../../static/qdcgbj.png');
				background-size: 77rpx;
				font-size: 26rpx;
				text-align: center;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 77rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.box1-2-1box2 {
				width: 77rpx;
				height: 77rpx;
				background-image: url('../../../static/qdtitle3.png');
				background-size: 77rpx;
				font-size: 26rpx;
				text-align: center;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 77rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.box1-2-1text {
				margin-top: 20rpx;
				font-size: 26rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FF6D20;
				line-height: 30rpx;
			}
		}
	}

	.riqi {
		width: 720rpx;
		margin: 30rpx 5rpx;
		height: 543rpx;
		background-image: url('/static/qdbox.png');
		background-size: 720rpx;
		display: flex;
		flex-direction: column;
		// justify-content: center;
		align-items: center;

		.riqitop {
			margin: 0 auto;
			margin-top: 40rpx;
			font-size: 28rpx;
			font-family: Alibaba PuHuiTi;
			font-weight: 600;
			color: #333333;
			line-height: 30rpx;
		}

		.xian {
			width: 663rpx;
			height: 1rpx;
			margin: 40rpx 0;
			background-color: #e8e8e8;
		}

		.riqits {
			padding: 0 40rpx;
			display: flex;
			// justify-content: space-around;
			flex-wrap: wrap;

			.riqitsbox {
				width: 90rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				.riqits1 {
					width: 50rpx;
					height: 50rpx;
					margin: 10rpx 20rpx;
					text-align: center;
					font-size: 28rpx;
					font-family: Myriad Pro;
					font-weight: 400;
					color: #999999;
					line-height: 50rpx;
				}

				.riqits2 {
					width: 50rpx;
					height: 50rpx;
					background-color: #F15909;
					margin: 10rpx 20rpx;
					text-align: center;
					font-size: 28rpx;
					font-family: Myriad Pro;
					font-weight: 400;
					color: white;
					border-radius: 25rpx;
					line-height: 50rpx;
				}
			}

		}
	}

	.button {
		width: 276rpx;
		height: 84rpx;
		margin: 80rpx auto;
		background-image: url('../../../static/qdan.png');
		background-size: 276rpx;
		text-align: center;
		line-height: 84rpx;
		font-size: 26rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #FFFFFF;
	}

	.qdbottom {
		width: 735rpx;
		margin: 0 7rpx;
		height: 540rpx;
		background-image: url('/static/qddbbj.png');
		background-size: 735rpx;
	}

	.qdbottom1 {
		padding-top: 60rpx;
		margin-left: 40rpx;
		font-size: 30rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 600;
		color: #333333;
		line-height: 30rpx;
	}

	.qdbottom2 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 40rpx;

		.qdbottom2z {
			display: flex;
			align-items: center;

			>image {
				margin-right: 20rpx;
				width: 70rpx;
				height: 70rpx;
			}

			.qdbottom2z-1 {
				.qdbottom2z-1text {
					font-size: 30rpx;
					font-family: Alibaba PuHuiTi;
					font-weight: 500;
					color: #333333;
					line-height: 30rpx;
				}

				.qdbottom2z-1text1 {
					margin-top: 10rpx;
					font-size: 24rpx;
					font-family: Alibaba PuHuiTi;
					font-weight: 400;
					color: #FFAF00;
					line-height: 30rpx;
				}
			}
		}

		.qdbottom2y {
			width: 137rpx;
			height: 54rpx;
			background-color: rgb(255, 174, 69);
			border-radius: 27rpx;
			line-height: 54rpx;
			font-size: 24rpx;
			text-align: center;
			font-family: Alibaba PuHuiTi;
			font-weight: 400;
			color: #FFFFFF;
		}
	}

	.bottom {
		width: 100vw;
		display: flex;
		flex-direction: column;
		align-items: center;

		>view {
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #B8B9BF;
			line-height: 38rpx;
		}
	}

	.tance {
		width: 544rpx;
		height: 695rpx;
		overflow: hidden;
	}

	.tancebj {
		width: 544rpx;
		height: 695rpx;
		position: absolute;
		z-index: -1;
	}

	.qdcgtitle {
		margin: 0 auto;
		margin-top: 147rpx;
		font-size: 48rpx;
		font-family: PangMenZhengDao;
		font-weight: 400;
		text-align: center;
		color: #FFFEFE;
		line-height: 32rpx;
		text-shadow: 0rpx 6rpx 5rpx rgba(199, 20, 40, 0.28);
	}

	.qdcgtitle1 {
		margin: 0 auto;
		margin-top: 40rpx;
		font-size: 20rpx;
		text-align: center;
		font-family: Alibaba PuHuiTi;
		font-weight: 500;
		color: #D75E02;
		line-height: 32rpx;
		opacity: 0.9;
	}

	.qiandaoriqi {
		margin: 0 auto;
		width: 400rpx;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}

	.lilidou {
		margin: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.linlidimg {
		width: 58rpx;
		height: 51rpx;
	}

	.linlidtext {
		font-size: 20rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #D75E02;
	}
</style>
